<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { formRules } from "./utils/rule";
	import { FormProps } from "./utils/types";
	import ReCol from "@/components/ReCol";
  import { message } from "@/utils/message";
  import dayjs from "dayjs";
  import { productListApi, storeListApi } from "@/api/purchaseOrderApi"
	const props = withDefaults(defineProps<FormProps>(), {
		formInline: () => ({
			title: "",
			status: 0,
			Id: 0,
		})
	});
	const ruleFormRef = ref();
	const newFormInline = ref(props.formInline);
	function getRef() {
		return ruleFormRef.value;
	}
	defineExpose({ getRef });

  onMounted(async()=> {
    if(newFormInline.value.title ==='创建订单'){
      newFormInline.value.checkNo = 'S' + dayjs().format('YYYYMMDDHHmmss')
    }
    if(newFormInline.value.title !=='订单详情') {
      getProductData()
      getStoreData()
    }

  })

  const addGoodsChange = () => {
    newFormInline.value.productList.push({
      productName: null,productNo: null, number: null,remarks: null
    })
  }
  const deleteGoodsChange = (index?: number) => {
    newFormInline.value.productList.splice(index, 1)
  }
  const productOptions = ref()
  const getProductData = async(val?: string) => {
    const res: any = await productListApi({
      page: 1,
      perPage: 10,
      productName: val
    });
    productOptions.value = res?.result?.list ?? []
  }
  // 获取仓库
  const storeOptions = ref()
  const getStoreData = async(val?: string) => {
    const res: any = await storeListApi({name: val});
    storeOptions.value = res?.result?.list ?? []
  }
  // 获取选中产品的信息
  const productInfo = ref()
  const productChange = (val: any, row: any) => {

    row.productInfo = productOptions.value.find(item => item.productId === row.productId);
  }
  // 仓库盘点(表格中禁用仓库选项，并用头部仓库id)
  const storeChange = (val: any) => {
    for (let item of newFormInline.value.productList) {
      item.storeId = val
    }
  }
  const expandColumns: TableColumnList = [
    { label: "产品名称", prop: "product", minWidth: 150, formatter:(row: any)=> {
    	return row.product?.productName || '--'
    }},
    { label: "产品编号", prop: "productNo", minWidth: 150, formatter:(row: any)=> {
    	return row.product?.productNo || '--'
    }},
    { label: "规格", prop: "productSpec", minWidth: 150, formatter:(row: any)=> {
    	return row.product?.productSpec || '--'
    }},
    { label: "单位", prop: "productUnit", minWidth: 80, formatter:(row: any)=> {
    	return row.product?.productUnit || '--'
    }},
    { label: "数量", prop: "realNumber", minWidth: 120, formatter:(row: any)=> {
    	return row?.realNumber*1 || '--'
    }},
    { label: "单价", prop: "price", minWidth: 140, formatter:(row: any)=> {
    	return row.product?.price*1 || '--'
    }},
    { label: "总金额", prop: "amount", minWidth: 140, formatter:(row: any)=> {
    	return row.product?.amount*1 || '--'
    }},
    { label: "分类", prop: "name", minWidth: 150, formatter:(row: any)=> {
    	return row.product?.category?.name || '--'
    }},
    { label: "项目", prop: "projectName", minWidth: 150, formatter:(row: any)=> {
    	return row.product?.project?.projectName || '--'
    }},
    { label: "仓库", prop: "name", minWidth: 150, formatter:(row: any)=> {
    	return row.product?.store?.name || '--'
    }},
    { label: "备注", prop: "remarks", minWidth: 120, formatter:(row: any)=> {
    	return row.product?.remarks || '--'
    }},
  ];
</script>

<template>
	<el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="auto" class="mb-[20px]">
    <el-row :gutter="30" v-if="newFormInline.title ==='编辑订单' || newFormInline.title ==='创建订单'">
      <el-col :span="24">
      	<el-form-item label="盘点单号" prop="checkNo">
          <el-input v-model="newFormInline.checkNo" clearable placeholder="请输入" :disabled="newFormInline.title ==='编辑订单'"/>
      	</el-form-item>
      </el-col>
      <el-col :span="24">
      	<el-form-item label="盘点类型" prop="checkType" required>
          <el-radio-group v-model="newFormInline.checkType" :disabled="newFormInline.title ==='编辑订单'">
            <el-radio :label="1">产品盘点</el-radio>
            <el-radio :label="2">仓库盘点</el-radio>
          </el-radio-group>
      	</el-form-item>
      </el-col>
      <el-col :span="24" v-if="newFormInline.checkType === 2" >
      	<el-form-item label="仓库" prop="storeId" required>
          <!-- <el-input v-model="newFormInline.storeId" clearable placeholder="请输入" /> -->
          <el-select
            v-model="newFormInline.storeId"
            placeholder="请选择"
            clearable
            filterable
            class="!w-full"
            :filter-method="getStoreData"
            @change="storeChange"
            :disabled="newFormInline.title ==='编辑订单'"
          >
            <el-option
              v-for="item in storeOptions"
              :key="item.storeId"
              :label="item.name"
              :value="item.storeId"
            />
          </el-select>
      	</el-form-item>
      </el-col>
      <el-col :span="24">
      	<el-form-item label="盘点状态" prop="status" required>
          <el-radio-group v-model="newFormInline.status">
            <el-radio :label="1">盘库中</el-radio>
            <el-radio :label="2">盘点入库</el-radio>
          </el-radio-group>
      	</el-form-item>
      </el-col>
      <el-col :span="24">
      	<el-table :data="newFormInline.productList" border style="width: 100%" :header-cell-style="{background: '#e3e3e3',
      	  color: 'var(--el-text-color-primary)'}">
      	  <el-table-column prop="productId" label="产品" min-width="150">
      	    <template #default="scope">
              <el-select
                v-model="scope.row.productId"
                placeholder="请选择"
                clearable
                filterable
                class="!w-full"
                :filter-method="getProductData"
                @change="(val)=>productChange(val, scope.row)"
              >
                <el-option
                  v-for="item in productOptions"
                  :key="item.productId"
                  :label="item.productName"
                  :value="item.productId"
                />
              </el-select>
      	    </template>
      	  </el-table-column>


          <el-table-column prop="productNo" label="产品编号" min-width="150">
            <template #default="scope">
              {{scope.row.productInfo?.productNo ?? '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="productSpec" label="规格" min-width="150">
            <template #default="scope">
              {{scope.row.productInfo?.productSpec ?? '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="productUnit" label="单位" min-width="90">
            <template #default="scope">
              {{scope.row.productInfo?.productUnit ?? '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="realNumber" label="数量" min-width="100">
            <template #default="scope">
              <el-input v-model="scope.row.realNumber" placeholder="请输入" type="number" class="no_number"/>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="产品单价" min-width="120">
            <template #default="scope">
              {{scope.row.productInfo?.price?scope.row.productInfo?.price*1 : '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="总金额" min-width="120">
            <template #default="scope">
              {{scope.row.productInfo?.amount ? scope.row.productInfo?.amount*1 : '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="categoryId" label="分类" min-width="120">
            <template #default="scope">
              {{scope.row.productInfo?.category?.name ?? '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="projectId" label="项目" min-width="150">
            <template #default="scope">
              {{scope.row.productInfo?.project?.projectName ?? '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="storeId" label="仓库" min-width="120">
            <template #default="scope">
              <el-select
                v-model="scope.row.storeId"
                placeholder="请选择"
                clearable
                filterable
                class="!w-full"
                :filter-method="getStoreData"
                :disabled="newFormInline.checkType === 2"
              >
                <el-option
                  v-for="item in storeOptions"
                  :key="item.storeId"
                  :label="item.name"
                  :value="item.storeId"
                />
              </el-select>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="deviceId" label="设备" min-width="160">
            <template #default>
              {{productInfo?.store?.name ?? '--'}}
            </template>
          </el-table-column>
          <el-table-column prop="accessoriesId" label="配件" min-width="160">
            <template #default="scope">

            </template>
          </el-table-column> -->

          <el-table-column prop="remarks" label="备注" min-width="120">
            <template #default="scope">
              <el-input v-model="scope.row.remarks" type="textarea" :rows="2" placeholder="请输入" />
            </template>
          </el-table-column>
      	  <el-table-column prop=" " label="操作" width="70" fixed="right">
      	    <template #default="{row, $index}">
      	      <el-button type="primary" v-if="$index === 0" class="!w-[40px]" @click="addGoodsChange">+</el-button>
      	      <el-button type="danger" v-else class="!w-[40px]" @click="deleteGoodsChange($index)">-</el-button>
      	    </template>
      	  </el-table-column>
      	</el-table>

      </el-col>


    </el-row>
    <template v-if="newFormInline.title === '订单详情'">
      <div class="no_buttom mb-[10px]">
        <el-form-item label="盘点单号">
          <span>{{newFormInline.detaileInfo?.checkNo}}</span>
        </el-form-item>
        <el-form-item label="盈亏数">
          <span>{{newFormInline.detaileInfo?.totalNum * 1}}</span>
        </el-form-item>
        <el-form-item label="盘点类型">
          <span>{{newFormInline.detaileInfo?.checkTypeStr || '--'}}</span>
        </el-form-item>
        <el-form-item label="盘点状态">
          <span>{{newFormInline.detaileInfo?.orderTypeName === 1?'盘库中':'已完成'}}</span>
        </el-form-item>
      </div>
      <pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto" border
        :adaptiveConfig="{ offsetBottom: 108 }" :data="newFormInline.detaileInfo?.checkProducts" :columns="expandColumns"
        :paginationSmall="true" :header-cell-style="{background: '#e3e3e3',
        color: 'var(--el-text-color-primary)'}">
      </pure-table>
    </template>
	</el-form>
</template>
<style scoped>
  :deep(.el-input-number.is-without-controls .el-input__wrapper) {
    padding: 1px 11px;
  }
  :deep(.el-input-number .el-input__inner) {
    text-align: left;
  }
  :deep(.no_buttom .el-form-item) {
    margin-bottom: 0px;
  }
</style>
